<template>
	<view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
		<!-- 商品分类 -->
			<view class="" v-else>
				<view class="rounded-20 m-2 bg-white" v-for="(item,index) in oneGoods" :key="index">
					<u-swipe-action :show="item.show" :index="index" @click="c_one" @open="o_one" :options="options" :btn-width='150'>
						<view class="d-flex j-sb p-3" @click="goods_add(item)" >
							<view class="d-flex">
								<view class="" v-if="item.iconshow">
									<u-icon v-if="item.icon_show" name="minus-circle" color="#E7484D" size="40"></u-icon>
									<u-icon v-else  name="plus-circle" color="#E7484D" size="40"></u-icon>
								</view>
								<view class="ml-1 font-md ellipsis-1" :class="item.is_show?'':'text-muted'"><view>{{item.cat_name}}</view></view>
							</view>
							<u-icon name="arrow-right" color="#999" size="28" @click="class_detail(item)"></u-icon>	
						</view>	
					</u-swipe-action>
					
					<!-- 二级 -->
					<view class="" v-show="item.icon_show">
						<view class="" v-if="item.cat_id==items.parent_id" v-for="(items,indexs) in twoGoods" :key="indexs">
							<u-swipe-action :show="items.show" :index="indexs" @open="o_two" @click="c_two" :options="options" :btn-width='150'>
								<view class="d-flex j-sb p-3 mx-2" @tap.stop="goods_level(items)">
									<view class="d-flex">
										<view class="" v-if="items.iconshow">
											<u-icon v-if="items.icon_show" name="minus-circle" color="#E7484D" size="40"></u-icon>
											<u-icon v-else  name="plus-circle" color="#E7484D" size="40"></u-icon>
										</view>
										<view class="ml-1 font-md ellipsis-1" :class="items.is_show?'':'text-muted'"><view>{{items.cat_name}}</view></view>
									</view>
									<u-icon name="arrow-right" color="#999" size="28" @tap.stop="two_detail(items)"></u-icon>
								</view>
							</u-swipe-action>
							<!-- 三级 -->
							<view class="" v-show="items.icon_show">
								<view class="" v-if="items.cat_id==threeItem.parent_id" v-for="(threeItem,threeIndex) in threeGoods" :key="threeIndex">
									<u-swipe-action :show="threeItem.show" :index="threeIndex" @open="o_three" @click="c_three" :options="options" :btn-width='150'>
										<view class="px-5 py-2 d-flex j-sb mx-3" >
											<view class="ml-1 font-md ellipsis-1" :class="threeItem.is_show?'':'text-muted'"><view>{{threeItem.cat_name}}</view></view>
											<u-icon name="arrow-right" color="#999" size="28" @tap.stop="three_detail(threeItem)"></u-icon>
										</view>
									</u-swipe-action>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer"></view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="addClazz">添加分类</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight:0, // 自适应高度
				
				goodsClazz:[], // 商品分类列表
				oneGoods:[], // 1级商品分类
				twoGoods:[], // 2级商品分类
				threeGoods:[], // 3级商品分类
				
				u_loadmore:true, // 加载中
				
				options: [
					{
						text: '查看商品',
						style: {
							backgroundColor: '#fe9900'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#fe0000'
						}
					}
				],
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].top + 'px';
					})
				}
			})
		},
		methods: {
			c_one(index, index1) {
				let category_id=this.oneGoods.find((v,i)=>{
					if(index==i){
						return v.cat_id
					}
				})
				if(index1 == 1) {
					if(category_id.iconshow){
						this.$u.toast(`该商品下有商品或非末级分类！`);
					}else{
						this.oneGoods.splice(index, 1);
						this.$H.post('admin/merchant/goods/merchant/category/delete',{
							category_id:category_id.cat_id
						}).then(res=>{
							this.$u.toast(`删除成功`);
							this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
								this.goodsClazz=res.data
								this.goodsClazz.filter((item,index)=>{
										return item.icon_show=false,item.iconshow=false,item.show=false
								})
								this.oneGoods=this.goodsClazz.filter((item,index)=>{
									if(item.parent_id==0){
										this.oneGoods=this.goodsClazz.forEach((v,i)=>{
											if(item.cat_id==v.parent_id){
												return item.iconshow=true
											}
										})
										return item
									}
								})
							})
						})
					}
				} else {
					uni.navigateTo({
						url:'/pages/goods-class-seach/goods-class-seach?cat_id='+category_id.cat_id
					})
					this.oneGoods[index].show = false;
					console.log(1)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			o_one(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.oneGoods[index].show = true;
				this.oneGoods.map((val, idx) => {
					if(index != idx) this.oneGoods[idx].show = false;
				})	
			},		
			c_two(index, index1) {
				let category_id=this.twoGoods.find((v,i)=>{
					if(index==i){
						return v.cat_id
					}
				})
				if(index1 == 1) {
					if(category_id.iconshow){
						this.$u.toast(`该商品下有商品或非末级分类！`);
					}else{
						this.twoGoods.splice(index, 1);
						this.$H.post('admin/merchant/goods/merchant/category/delete',{
							category_id:category_id.cat_id
						}).then(res=>{
							this.$u.toast(`删除成功`);
							this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
								this.goodsClazz=res.data
								this.goodsClazz.filter((item,index)=>{
										return item.icon_show=false,item.iconshow=false,item.show=false
								})
								this.oneGoods=this.goodsClazz.filter((item,index)=>{
									if(item.parent_id==0){
										this.oneGoods=this.goodsClazz.forEach((v,i)=>{
											if(item.cat_id==v.parent_id){
												return item.iconshow=true
											}
										})
										return item
									}
								})
							})
						})
					}
				} else {
					uni.navigateTo({
						url:'/pages/goods-class-seach/goods-class-seach?cat_id='+category_id.cat_id
					})
					this.twoGoods[index].show = false;
					console.log(1)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			o_two(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.twoGoods[index].show = true;
				this.twoGoods.map((val, idx) => {
					if(index != idx) this.twoGoods[idx].show = false;
				})
			},
			c_three(index, index1) {
				let category_id=this.threeGoods.find((v,i)=>{
					if(index==i){
						return v.cat_id
					}
				})
				if(index1 == 1) {
					if(category_id.iconshow){
						this.$u.toast(`该商品下有商品或非末级分类！`);
					}else{
						this.threeGoods.splice(index, 1);
						this.$H.post('admin/merchant/goods/merchant/category/delete',{
							category_id:category_id.cat_id
						}).then(res=>{
							this.$u.toast(`删除成功`);
							this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
								this.goodsClazz=res.data
								this.goodsClazz.filter((item,index)=>{
										return item.icon_show=false,item.iconshow=false,item.show=false
								})
								this.oneGoods=this.goodsClazz.filter((item,index)=>{
									if(item.parent_id==0){
										this.oneGoods=this.goodsClazz.forEach((v,i)=>{
											if(item.cat_id==v.parent_id){
												return item.iconshow=true
											}
										})
										return item
									}
								})
							})
						})
					}
				} else {
					this.threeGoods[index].show = false;
					uni.navigateTo({
						url:'/pages/goods-class-seach/goods-class-seach?cat_id='+category_id.cat_id
					})
					console.log(1)
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			o_three(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.threeGoods[index].show = true;
				this.threeGoods.map((val, idx) => {
					if(index != idx) this.threeGoods[idx].show = false;
				})
			},
			
			// 编辑商品分类页面
			class_detail(item){
				uni.navigateTo({
					url:"/pages/goods-class-edit/goods-class-edit?category_id="+item.cat_id
				})
			},
			// 二级
			two_detail(item){
				uni.navigateTo({
					url:`/pages/goods-class-edit/goods-class-edit?category_id=${item.cat_id}&two=${2}`
				})
			},
			// 三级
			three_detail(item){
				uni.navigateTo({
					url:`/pages/goods-class-edit/goods-class-edit?category_id=${item.cat_id}&two=${3}`
				})
			},
			tab_class(i){
				this.tabIndex=i
				// 商品分类
				if(this.tabIndex==0){
					this.oneGoods=this.goodsClazz.filter((item,index)=>{
						if(item.parent_id==0){
							return item
						}
					})
				}
			},
			// 商品展开 收起 一级
			goods_add(items){
				this.twoGoods=this.goodsClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
				this.twoGoods.filter((item,index)=>{
					this.goodsClazz.filter((v,i)=>{
						if(item.cat_id==v.parent_id){
							return item.iconshow=true
						}
					})
					
				})
				items.icon_show=!items.icon_show
			},
			// 商品二级列表
			goods_level(items){
				items.icon_show=!items.icon_show
				this.threeGoods=this.goodsClazz.filter((item,index)=>{
					if(items.cat_id==item.parent_id){
						return item
					}
				})
			},
			// 添加分类
			addClazz(){
				uni.navigateTo({
					url:"/pages/goods-class-add/goods-class-add?addClazz="+'添加分类'
				})
				var globalData = getApp().globalData.closeLists; //获取全局变量
				getApp().globalData.closeLists= '顶级分类'; //修改全局变量
			}
		},
		onLoad() {
			// 商品分类 merchant merchant
			// this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
			// 	if(res.status.succeed == 1){
			// 		this.u_loadmore=false   
			// 		this.goodsClazz=res.data
			// 		this.goodsClazz.filter((item,index)=>{
			// 				return item.icon_show=false,item.iconshow=false,item.show=false
			// 		})
			// 		this.oneGoods=this.goodsClazz.filter((item,index)=>{
			// 			if(item.parent_id==0){
			// 				this.oneGoods=this.goodsClazz.forEach((v,i)=>{
			// 					if(item.cat_id==v.parent_id){
			// 						return item.iconshow=true
			// 					}
			// 				})
			// 				return item
			// 			}
			// 		})
			// 	}
			// })	
		},
		onShow() {
			var globalData = getApp().globalData.closeLists; //获取全局变量
			getApp().globalData.closeLists= ''; //修改全局变量
			// 商品分类
			this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
				this.goodsClazz=res.data
				this.goodsClazz.filter((item,index)=>{
						return item.icon_show=false,item.iconshow=false,item.show=false
				})
				this.oneGoods=this.goodsClazz.filter((item,index)=>{
					if(item.parent_id==0){
						this.oneGoods=this.goodsClazz.forEach((v,i)=>{
							if(item.cat_id==v.parent_id){
								return item.iconshow=true
							}
						})
						return item
					}
				})
				this.u_loadmore=false   
			})
		},
		
	}
</script>

<style>
	.tab_title{
		border: 1px solid #E7484D;
		color: #E7484D;
		border-radius: 40upx;
		overflow: hidden;
	}
	.active_class{
		background-color: #E7484D;
		color: #FFFFFF;
	}
	.btn /deep/ button{
		width: 85%;
		border-radius: 50upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.footer{
		height: 134upx;
	}
</style>
